<template>
	<view class="pages">
		<!-- 好友列表 -->
		<view class="friend-list">
			<!-- 好友卡片 -->
			<view class="friend-card" v-for="(d,i) in listdata" :key="i">
				<!-- 用户信息头部 -->
				<view class="card-header">
					<view class="user-info">
						<image :src="getimg(d.avatar)" class="avatar" mode="aspectFill"></image>
						<view class="user-detail">
							<text class="nickname">{{d.nickname}}</text>
							<view class="phone-row" @click="makePhoneCall(d.mobile)">
								<uni-icons type="phone" color="#ff4757" size="18"></uni-icons>
								<text class="phone">{{d.hideMobile}}</text>
							</view>
						</view>
					</view>
					<view class="level-badge">
						<text class="level-text">{{d.levelName}}</text>
					</view>
				</view>

				<!-- 数据统计 -->
				<view class="card-body">
					<view class="stat-grid">
						<view class="stat-item">
							<text class="stat-label">团队人数</text>
							<text class="stat-value">{{d.mun}}人</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">霸王餐</text>
							<text class="stat-value highlight">{{d.overlord_amount}}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">竞购</text>
							<text class="stat-value highlight">{{d.bidding_amount}}</text>
						</view>
					</view>
					<view class="stat-grid">
						<view class="stat-item">
							<text class="stat-label">进货</text>
							<text class="stat-value highlight">{{d.store_purchase_amount}}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">分享有礼</text>
							<text class="stat-value highlight">{{d.share_amount}}</text>
						</view>
						<view class="stat-item">
							<text class="stat-label">门店订单</text>
							<text class="stat-value highlight">{{d.store_order_amount}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 空状态 -->
			<view v-if="!loading && listdata.length === 0" class="empty-state">
				<text class="empty-icon">👥</text>
				<text class="empty-text">暂无好友数据</text>
				<text class="empty-tip">快去邀请好友加入吧</text>
			</view>
			
			<!-- 加载更多提示 -->
			<view v-if="loading && listdata.length > 0" class="loading-more">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			<view v-if="!haveMore && listdata.length > 0" class="no-more">
				<view class="no-more-line"></view>
				<text class="no-more-text">已加载全部好友</text>
				<view class="no-more-line"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import $util from "@/util/util.js"
	import nodata from '@/components/nodata/nodata.nvue'
	import popup from '@/components/popupnew/popupnew'
	import pay from '@/components/pay/pay.nvue'
	import {getlocation} from '@/util/tool'
	export default { 
		
		data() {
			return {
				w_h:uni.getSystemInfoSync().windowHeight,
				words:'',//搜索关键词
				navIndex: 0,
				listdata:[],
				page: 1,
				haveMore: true,
				loading: false,
				first:true,
				head:getApp().globalData.head,
				l:{},
				
				payid:-1,//支付给谁
				payname:'',//，门店对应的名字
				paynum:'',//支付的金额
				showyh:false,//显示输入价格
				showpay:false,//显示支付
				jifen:0,//抵扣积分
				trueprice:0,//实际支付现金
			}
		},
		components: {
		nodata,
		popup,
		pay
		},
		onLoad(e) {
		this.navIndex = e.type && parseInt(e.type)>=1?e.type:0
		
		},
		onShow() {
			this.int();
		},
		//下拉刷新触发，需要在pages里面设置
		onPullDownRefresh(){
		this.int();
		},
		//下到底部触发，需要在pages里面设置onReachBottomDistance
		onReachBottom() {
		this.loadmore()
		},
		
		methods: {
			comprice(){
				let num = 0;
				let p = parseFloat(this.l.mypoint);
				let j = parseFloat(this.l.jj);
				
				if(this.paynum <= p){
					num = 0
				}else{
					num = this.paynum - p
				}
				
				if(this.paynum > j)
				num = this.paynum - j
				
				return (num*1).toFixed(2);
			},
			gopay(e){
				this.showyh = false
				$util.showProgress()
				$util.ajax({
					url:'Mendian/creatMdorder',
					payid:this.payid,
					paynum:this.paynum
				},(r)=>{
					$util.hideProgress()
					if(r.code == 1){
						this.showpay = false;
						let paydata = r.data;
						paydata.paytype = e
						$util.topay(paydata,(status,data)=>{
						if(status == 1){
						$util.alert('成功支付门店'+this.payname,()=>{
						//$util.openwin('/pages/memberinfo/carlist/carlist?type=1')
						this.int()
						})
						}else{
						$util.alert(data)
						}
						});
						
					}else if(r.code == 2){
						$util.alert(r.msg,()=>{
							$util.openwin('/pages/memberinfo/carlist/carlist?type=1')
						})
					}else{
						$util.alert(r.msg)
					}
				})
				
			},
			topay(id,title){
				this.payid = id
				this.payname = title
				this.jifen = 0
				this.showyh = true
				console.log(this.payname)
			},
			topays(){
				this.showyh = false
				if(parseFloat(this.comprice()) <= 0){
					$util.confirm('请确认支付？',['确认','取消'],(iix)=>{
						if(iix == 1){
							this.gopay(2);
						}
					})
					return
				}
				$util.showProgress()
				setTimeout(()=>{
					$util.hideProgress()
					this.showpay = true
				},800)
				
			},
			opencall(mobile){
				wx.makePhoneCall({
				      phoneNumber: mobile
				    })
			},
			openmap(latitude,longitude){
				console.log(Number(latitude),Number(longitude))
				uni.openLocation({
							latitude: Number(latitude),
							longitude: Number(longitude),
							success: function () {
								console.log('success');
							},
							fail(e) {
								console.log('err'+JSON.stringify(e))
							}
						});
			},
			search(){
				this.navIndex = 0;
				this.get_data()
			},
			makePhoneCall(mobile) {
				if (!mobile || mobile === '') {
					$util.toast('手机号码不存在');
					return;
				}
				uni.makePhoneCall({
					phoneNumber: mobile,
					success: function () {
						console.log('拨打电话成功');
					},
					fail: function (err) {
						console.log('拨打电话失败', err);
						$util.toast('拨打电话失败');
					}
				});
			},
			getimg(path){
				return $util.get_img(path)
			},
			int(){
				$util.ajax({
					url:'Mendian/getint'
				},(r)=>{
					if(r.code == 1){
						this.l = r.data
						this.get_data();
					}
				})
			},
			get_data(loading = false) {
				let that = this;
				// 首次加载显示进度条，分页加载不显示
				if(!loading){
					$util.showProgress();
					that.page = 1;
					that.haveMore = true;
					that.listdata = [];
				}
				
				that.loading = true;
				
				$util.ajax({
					//url: 'Mendian/get_list',
					url: 'Member/ajaxfriend',
					lei:this.l.mlei && this.l.mlei[this.navIndex] ? this.l.mlei[this.navIndex].id : 0,
					sc:1,
					page:that.page
				}, (res, err) => {
					console.log(JSON.stringify(res));
					if(!loading){
						$util.hideProgress();
					}
					uni.stopPullDownRefresh();
					that.loading = false;
					that.first = false;
					
					if(res.code == 1 && res.data && res.data.length > 0){
						that.listdata = that.listdata.concat(res.data);
						that.page += 1;
						// 如果返回数据少于预期，说明没有更多了
						if(res.data.length < 20){
							that.haveMore = false;
						}
					}else{
						that.haveMore = false;
					}
				}) 
			},
			changetab(i){
			this.navIndex = i;
			this.listdata = [];
			this.haveMore =  true;
			this.loading = false;
			this.get_data();
			},
			shuaxin(){
			this.get_data();
			},
			loadmore(){
				if(this.haveMore && !this.loading){
					console.log('开始触发分页加载');
					this.get_data(true);
					// #ifdef APP-NVUE
					this.$refs["list"].resetLoadmore();  
					// #endif
				}
			}
		},
		computed: {
		    maskedPhoneNumber() {
		      return this.phoneNumber.replace(/(\d{3})\d*(\d{4})/, '$1&zwnj;****$2'); // 例如，显示为123****&zwnj;901
		    }
		  },
	}
</script>

<style scoped>
.pages {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 好友列表 */
.friend-list {
	padding: 20rpx;
}

/* 好友卡片 */
.friend-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	transition: all 0.3s;
}

.friend-card:active {
	transform: scale(0.98);
}

/* 卡片头部 */
.card-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1px solid #f0f0f0;
}

.user-info {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	margin-right: 20rpx;
	border: 3rpx solid #f0f0f0;
}

.user-detail {
	display: flex;
	flex-direction: column;
}

.nickname {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.phone-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	cursor: pointer;
	transition: all 0.2s;
}

.phone-row:active {
	opacity: 0.6;
}

.phone {
	font-size: 24rpx;
	color: #666666;
	margin-left: 8rpx;
}

.level-badge {
	background: linear-gradient(135deg, #ff6348, #ff4757);
	padding: 8rpx 20rpx;
	border-radius: 30rpx;
	box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
}

.level-text {
	font-size: 24rpx;
	color: #ffffff;
	font-weight: bold;
}

/* 卡片主体 */
.card-body {
	padding-top: 20rpx;
}

.stat-grid {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.stat-grid:last-child {
	margin-bottom: 0;
}

.stat-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15rpx 0;
	background: linear-gradient(135deg, #f8f9fa, #ffffff);
	border-radius: 12rpx;
	margin: 0 10rpx;
}

.stat-item:first-child {
	margin-left: 0;
}

.stat-item:last-child {
	margin-right: 0;
}

.stat-label {
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 10rpx;
}

.stat-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: bold;
}

.stat-value.highlight {
	color: #ff4757;
	font-size: 30rpx;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 150rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #666666;
	margin-bottom: 15rpx;
}

.empty-tip {
	font-size: 26rpx;
	color: #999999;
}

/* 加载状态 */
.loading-more {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
}

.loading-spinner {
	width: 30rpx;
	height: 30rpx;
	border: 3rpx solid #f0f0f0;
	border-top-color: #ff4757;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-right: 15rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 26rpx;
	color: #999999;
}

.no-more {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 40rpx 0;
	gap: 20rpx;
}

.no-more-line {
	width: 80rpx;
	height: 1px;
	background: linear-gradient(to right, transparent, #e0e0e0, transparent);
}

.no-more-text {
	font-size: 24rpx;
	color: #999999;
}

/* 旧样式保留（如果还需要） */
	.danm {
		background: #ffffff;
		padding: 20rpx;
		border-bottom: solid #ededed 1px;
		display: flow-root;
		
	}
	.danm:last-child {
		border-bottom:none ;
	}
	.a-left{
		margin-left: 30rpx;
	}
	.a11{
		width: 33.33%;
		float: left;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.a1-s{
		height: 30rpx;
		padding-top: 8rpx;
	}
	.a2{
		padding-top: 3.5rem;
		margin-left: 70rpx;
	}
	.scrollcon {
		    background: #ffffff;
			flex-direction: row;
			/* #ifndef APP-NVUE */
			white-space: nowrap;
			/* #endif */
	}
	.dan_list_w{
	flex-direction: row;
	border-top: 1px #efefef solid;	
	padding-top: 20rpx;
	}
	.dan_list {
		width:150rpx;
		position: relative;
		border-radius: 10rpx;
		align-items: center;
	}
	.msg{
	    position: absolute;
	    top: 0;
	    right: 0;
	    background: red;
	    color: #ffffff;
	    border-radius: 20px;
	    font-size: 12px;	
	}
	.dan_list_t{
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		color: #383838;
	}
	.dan_list_t_{
		font-weight: bold;
		color: #ff1313;
	}
	
	.local{
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1px #eeeeee solid;
		margin-top: 20rpx;
	}	
	.localw{
		width: 450rpx;
	}
	.localt{
		font-size: 26rpx;
		color: #767676;
	}
	.chong{
		font-size: 28rpx;
	}
	
	

	.avatarw {
	}
	
	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 20rpx;
	}
	
	.info {
		margin-left: 10rpx;
		width: 500rpx;
	}
	
	.title {
		font-weight: bold;
		color: #383838;
		font-weight: bold;
		font-size: 28rpx;
	}
	
	.infos {
		font-size:26rpx;
		color: #474747;
		margin-bottom: 0rpx;
	}
	
	.rightd {
		width: 500rpx;
	}
	
	.nums {
		font-size: 28rpx;
		color: #585858;
		border: solid red 1px;
		padding: 1px 6px;
	}
	
	.kuai{
		background: #ffffff;
		padding:40rpx 20rpx;
	}
	.dank{
		align-items: center;
		
	}
	.val{
		font-size: 32rpx;
		color: red;
	}
	.names{
		font-size: 28rpx;
		color: #767676;
	}
	.uinfo{
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}
	.avatar1{
		width: 70rpx;
		height: 70rpx;
		border-radius: 80rpx;
		margin-right: 20rpx;
	}
	
	.nickname{
		font-size:28rpx;
		color: #585858;
		margin-bottom: 5rpx;
		margin-left: 10rpx;
	}
	.card_btn{
		color: #ffffff;
		background-color: red;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}
	.zz{
		background: #ffffff;
		padding: 20rpx;
		align-items: center;
	}
	.names{
		font-size: 30rpx;
		color: #585858;
	}
	.zzi{
		width: 400rpx;
		height: 80rpx;
		border-radius: 20rpx;
		background: #ededed;
		padding: 0 20rpx;
	}
	.queren{
		width: 600rpx;
		height: 80rpx;
		background:linear-gradient(to right, #9cbbe9, #70d4eb);
		border-radius: 20rpx;
		align-items: center;
		justify-content: center;
	}
	.btnt{
		font-size: 30rpx;
		color: #ffffff;
	}
	.infos{
		font-size: 30rpx;
		color: #232323;
	}
	
	.dw{
		width: 250rpx;
		height: 50rpx;
		overflow: hidden;
	}
	.xf{
		background: #F11E1E;
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
	}
	.xfn{
		justify-content: center;
		height: 44px;
		padding: 0 20rpx;
	}
	.wz{
		font-size: 16px;
		font-weight: bold;
		line-height: 30px;
		color: #ffffff;
	}
</style>
